import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { Group } from 'three';
 
const app = document.querySelector<HTMLDivElement>('#app')!

const scene = new THREE.Scene();
let root:Group
const loader = new GLTFLoader()
loader.load('https://asset-stage.yit.com/DIGITAL_COLLECTION/1643006369354urhfdwlpnollnzc.glb', (gltf) => {
  root = gltf.scene
  root.scale.set(0.5,0.5,0.5)
  
  scene.add(root)
}, () => {}, () => {
  console.log('error')
})

// 灯光
const light0 = new THREE.DirectionalLight(0xffffff, 4)
light0.position.set(0,2,0)
scene.add(light0) 
// 灯光
const light1 = new THREE.DirectionalLight(0xffffff, 4)
light1.position.set(2,0,0)
scene.add(light1) 
// 灯光
const light2 = new THREE.DirectionalLight(0xffffff, 4)
light2.position.set(-2,0,0)
scene.add(light2) 
const light3 = new THREE.DirectionalLight(0xffffff, 4)
light3.position.set(0,-2,0)
scene.add(light3) 


const size = {
  width: window.innerWidth,
  height: window.innerHeight
}

const camera = new THREE.PerspectiveCamera(75, size.width/size.height, 0.1, 100);
camera.position.set(1, 1, 1);
scene.add(camera)

const renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setSize(size.width, size.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true
renderer.setClearColor(0x000000, 1); 
app.appendChild( renderer.domElement );
render()


const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0.4, 0 ); // 控制器的焦点
controls.update();
controls.autoRotate = true
controls.maxDistance = 3
controls.minDistance = 1
controls.enablePan = false
animate()

window.addEventListener('resize', onWindowResize );


function animate() {
  requestAnimationFrame(animate)
  controls.update();
  render()
}

// 相机位置
function onWindowResize() {
  camera.updateProjectionMatrix();
  render();
}

// 加载
function render() {
  renderer.render( scene, camera );
}
